koa2+ts实现上传图片

2024-02-16 20:20| 来源: 网络整理| 查看: 265

准备工作

给项目安装需要的库

yarn add koa-static @types/koa-static yarn add koa-body

或推荐使用yarn

npm install koa-static @type/koa-static npm install koa-body

如安装了koa-bodyparmas 要先卸载

yarn remove koa-bodyparmas 或 npm uninstall koa-bodyparmas 开始

在index.ts 中注册路由

import AuthController from './auth.ts' const routers = new Router() routers.post('/upload',AuthController.upload()) app.use(routers.routes())

index.ts

import body from 'koa-body'; import koastatic from 'koa-static'; import {resolve} from 'path' //注册body中间件 app.use(body({ multipart: true, //支持图片文件 formidable: { uploadDir: resolve(__dirname, './public/uploads'), //设置上传目录 keepExtensions: true, //保留拓展名 } })); //注册koa-static 这个库可以让你访问静态资源 app.use(koastatic(resolve(__dirname, 'public')))

新建auth.ts

import { Context } from "koa"; import path from "path"; type filesitemtype = { filepath: string, size: number, mimetype: string, newFilename: string, originalFilename: string url:string } type filestype = { url: string, size: number, mimetype: string, newFilename: string, originalFilename: string } export default class AuthController { public static async upload(ctx: Context) { const file: any = ctx.request.files; if (file.files instanceof Array) { let files: Array = []; await file.files.forEach((item: filesitemtype, key: number) => { const {filepath,size,mimetype,newFilename,originalFilename} = item const basename = path.basename(filepath) const url = `${ctx.origin}/uploads/${basename}` files.push({ url, size, mimetype, newFilename, originalFilename }) }) ctx.body = { start: 200, data: files, msg: '上传成功！' } } else { let basename = path.basename(file.files.filepath); ctx.body = { start: 200, data: { url: `${ctx.origin}/uploads/${basename}` }, msg: '上传成功！' } } } }

别忘了在项目根目录新建 public/uploads

好了看看效果吧

还有单张的

【本文地址】

公司简介

联系我们